90:I[903690,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"SWRDataProvider"] 92:T1fc8,[V0_FILE]typescriptreact:file="components/PianoKey.tsx" isEdit="true" isMerged="true" import { motion } from "framer-motion" interface PianoKeyProps { note: string isActive: boolean onClick: () => void isSharp: boolean } export default function PianoKey({ note, isActive, onClick, isSharp }: PianoKeyProps) { return ( {note.replace("#", "♯")} ) } [V0_FILE]typescript:file="lib/songs.ts" isEdit="true" isMerged="true" export const happinessAnthem = [ "E4", "E4", "F4", "G4", "G4", "F4", "E4", "D4", "C4", "C4", "D4", "E4", "D4", "C4", " ", // Adding a pause between phrases "E4", "E4", "F4", "G4", "G4", "F4", "E4", "D4", "C4", "C4", "D4", "E4", "D4", "C4", ] export const marioBrosTheme = [ "E5", "E5", " ", "E5", " ", "C5", "E5", " ", "G5", " ", " ", " ", "G4", " ", " ", " ", "C5", " ", " ", "G4", " ", " ", "E4", " ", " ", "A4", " ", "B4", " ", "A#4", "A4", " ", "G4", "E5", "G5", "A5", " ", "F5", "G5", " ", "E5", " ", "C5", "D5", "B4", " ", " ", "C5", " ", " ", "G4", " ", " ", "E4", " ", " ", "A4", " ", "B4", " ", "A#4", "A4", " ", "G4", "E5", "G5", "A5", " ", "F5", "G5", " ", "E5", " ", "C5", "D5", "B4", " ", " ", ] export const pokemonBattleTheme = [ "F4", "E4", "D#4", "D4", "C#4", "C4", "B3", "C4", "C#4", "D4", "D#4", "E4", "F4", "E4", "D#4", "D4", "C#4", "C4", "B3", "C4", "C#4", "D4", "D#4", "E4", "F4", "F#4", "G4", " ", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", "D4", ] [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Piano from "../components/Piano" export default function Home() { return (

Interactive Piano

) } [V0_FILE]typescriptreact:file="components/Piano.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { motion } from "framer-motion" import { Play } from "lucide-react" import { Button } from "@/components/ui/button" import PianoKey from "./PianoKey" import { happinessAnthem, marioBrosTheme, pokemonBattleTheme } from "../lib/songs" const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"] const octaves = [3, 4, 5] const audioContext = typeof window !== "undefined" ? new (window.AudioContext || (window as any).webkitAudioContext)() : null // Piano note frequencies (A4 = 440Hz as reference) const getFrequency = (note: string) => { const [noteName, octaveStr] = [note.slice(0, -1), note.slice(-1)] const octave = Number.parseInt(octaveStr) if (isNaN(octave)) return 440 // Return A4 as fallback const noteIndex = notes.indexOf(noteName) if (noteIndex === -1) return 440 // Return A4 as fallback // Calculate semitones from A4 (A4 = 440Hz) const A4Index = notes.indexOf("A") const semitonesDiff = noteIndex - A4Index + (octave - 4) * 12 // Calculate frequency using equal temperament formula return 440 * Math.pow(2, semitonesDiff / 12) } export default function Piano() { const [activeKeys, setActiveKeys] = useState([]) const [isPlaying, setIsPlaying] = useState(false) const [currentSong, setCurrentSong] = useState([]) const playNote = useCallback((note: string) => { if (!audioContext) return // Create audio components const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() const compressor = audioContext.createDynamicsCompressor() // Configure compressor for better piano-like sound compressor.threshold.setValueAtTime(-24, audioContext.currentTime) compressor.knee.setValueAtTime(30, audioContext.currentTime) compressor.ratio.setValueAtTime(12, audioContext.currentTime) compressor.attack.setValueAtTime(0.003, audioContext.currentTime) compressor.release.setValueAtTime(0.25, audioContext.currentTime) // Configure oscillator oscillator.type = "triangle" // Use triangle wave for more piano-like sound oscillator.frequency.setValueAtTime(getFrequency(note), audioContext.currentTime) // Configure envelope gainNode.gain.setValueAtTime(0, audioContext.currentTime) gainNode.gain.linearRampToValueAtTime(0.7, audioContext.currentTime + 0.01) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.5) // Connect audio nodes oscillator.connect(gainNode) gainNode.connect(compressor) compressor.connect(audioContext.destination) // Start and stop the note oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + 1.5) setActiveKeys((prev) => [...prev, note]) setTimeout(() => setActiveKeys((prev) => prev.filter((key) => key !== note)), 200) }, []) const playSong = useCallback( (song: string[], speed = 200) => { setIsPlaying(true) setCurrentSong(song) song.forEach((note, index) => { setTimeout(() => { if (note !== " ") playNote(note) if (index === song.length - 1) { setIsPlaying(false) setCurrentSong([]) } }, index * speed) }) }, [playNote], ) useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { const key = e.key.toUpperCase() if (notes.includes(key)) { playNote(key + "4") } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [playNote]) return (

{octaves.map((octave) => notes.map((note) => ( playNote(`${note}${octave}`)} isSharp={note.includes("#")} /> )), )}

Now playing:{" "} {isPlaying ? currentSong === happinessAnthem ? "Happiness Anthem" : currentSong === marioBrosTheme ? "Mario Bros Theme" : "Pokémon Battle Theme" : ""}

) } 86:["$","$L90",null,{"chatId":"atCuWoIkJ4V","children":["$","$L91",null,{"data":{"@\"active-block\",\"atCuWoIkJ4V\",":{"id":"b_0Dnf35Txpnf","messageId":"pTlxPb5enl5CJvGNhwdju2d4IReUnaFQ","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"InteractivePiano","type":"code-project","project":"InteractivePiano"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"atCuWoIkJ4V\",":false,"":null},"children":"$L93"}]}]

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This